<template>
  <div class="header">
    <el-container class="main">
      <el-header class="mainHeader">
        <div class="header-left">
          <span class="header-title">Panda-Family后台管理</span>
        </div>
        <div class="header-right">
          <div class="search">
            <i class="el-icon-search"></i>
          </div>
          <div class="notice">
            <i class="el-icon-bell"></i>
          </div>
          <div class="avatar">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="el-avatar"></el-avatar>
          </div>
          <div class="user">
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                Admin（Max）<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item divided command="onLogout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },

  created () {

  },

  methods: {
    handleCommand (command) {
      command === 'onLogout' && this.onLogout()
    },
    // 账号退出
    onLogout () {
      this.$confirm('这就要走了嘛 ?TAT', '嘤嘤嘤', {
        confirmButtonText: '说走就走',
        cancelButtonText: '留下',
        type: 'warning'
      })
        .then(() => {
          // 点击了确认
          sessionStorage.removeItem('token')
          this.$router.push('/login')
          this.$message.success('账号退出……')
        })
        .catch(() => {
          // 点击了取消
          console.log('嘻嘻嘻')
        })
    }
  }
}
</script>

<style scoped lang='less'>
.header {
  background: #fff;
  margin-bottom: 10px;
  box-shadow: 0px 0px 8px 0px rgba(63, 32, 135, 0.08);
  .main {
    height: 60px;
    .mainHeader {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 40px 0px 60px;
      height: 60px;
      .header-left {
        .header-title {
          color: #0e8bdb;
          font-size: 22px;
          font-weight: 600;
        }
      }
      .header-right {
        display: flex;
        align-items: center;
        .search {
          margin-right: 40px;
          .el-icon-search {
            font-size: 18px;
            color: #1a1a1b;
          }
        }
        .notice {
          margin-right: 60px;
          .el-icon-bell {
            font-size: 18px;
            color: #1a1a1b;
          }
        }
        .avatar {
          margin-right: 12px;
          .el-avatar {
            height: 30px;
            width: 30px;
          }
        }
        .user {
          cursor: pointer;
          .el-dropdown-link {
            color: #1a1a1b;
            font-size: 16px;
            outline: none;
          }
        }
      }
    }
  }
}
</style>
